<template>
  <div class='container'>
    <el-card class="box-card" >
      <!-- 头部提示语和按钮 -->
      <div  class="clearfix">
          <span style="color: pink; font-size: 12px">说明：目前支持学科和关键字条件筛选</span>
          <el-button style="float: right; padding: 3px 0" type="success" icon="el-icon-edit" class="addBtn" @click="$router.push('/questions/new')">新增试题</el-button>
      </div>
        <!-- 表单 -->
      <div>
        <el-form ref="form" :model="form" label-width="80px" size="mini">
          <el-row :gutter="24">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-form-item label="学科">
                          <el-select v-model="form.subjectID" placeholder="请选择" style="width:100%"    @change="changeFn(form.subjectID)">
                            <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                              >
                            </el-option>
                        </el-select>
                    </el-form-item>
                  </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-form-item label="二级目录">
                          <el-select v-model="form.twoLevelDirectory" placeholder="请选择" style="width:100%">
                            <el-option
                              v-for="item in twoLevelDirectory"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                  </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-form-item label="标签">
                          <el-select v-model="form.tags" placeholder="请选择" style="width:100%">
                            <el-option
                              v-for="item in tags"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                  </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-form-item label="关键字">
                        <el-input v-model="form.name" placeholder="根据题干搜索"></el-input>
                    </el-form-item>
                  </div>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-form-item label="试题类型">
                          <el-select v-model="form.questionType" placeholder="请选择" style="width:100%">
                            <el-option
                              v-for="item in questionType"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                  </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-form-item label="难度">
                          <el-select v-model="form.difficulty" placeholder="请选择" style="width:100%">
                            <el-option
                              v-for="item in difficulty"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                  </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-form-item label="方向">
                          <el-select v-model="form.direction" placeholder="请选择" style="width:100%">
                            <el-option
                              v-for="(item,index) in direction"
                              :key="index"
                              :label="item"
                              :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                  </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-form-item label="录入人">
                          <el-select v-model="form.creator" placeholder="请选择" style="width:100%">
                            <el-option
                              v-for="(item,index) in creator"
                              :key="index"
                              :label="item.label"
                              :value="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                  </div>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-form-item label="题目备注">
                        <el-input v-model="form.remarks"></el-input>
                    </el-form-item>
                  </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-form-item label="企业简称">
                        <el-input v-model="form.shortName"></el-input>
                    </el-form-item>
                  </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-form-item label="城市" >
                          <el-select v-model="form.provinces" placeholder="请选择" style="width:48%" @change="provincesFn" >
                            <el-option
                              v-for="(item,index) in provinces"
                              :key="index"
                              :label="item"
                              :value="item">
                            </el-option>
                        </el-select>
                          <el-select v-model="form.citys" placeholder="请选择" style="width:48%; float: right;">
                            <el-option
                              v-for="(item,index) in citys"
                              :key="index"
                              :label="item"
                              :value="item">
                            </el-option>
                        </el-select>
                      </el-form-item>
                       <!-- <el-form-item >
                          <el-select v-model="value" placeholder="请选择" style="width:45%; float: right;">
                            <el-option
                              v-for="(item,index) in citys"
                              :key="index"
                              :label="item"
                              :value="item">
                            </el-option>
                        </el-select>
                      </el-form-item> -->
                  </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-form-item  style="float: right;">
                      <el-button @click="claer">清空</el-button>
                      <el-button type="primary" @click="searchFn">搜索</el-button>
                    </el-form-item>
                  </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 标签页 -->
      <div>
       <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first">
              <el-alert type="info" :closable="false">
                数据一共{{ counts }}条
              </el-alert>
          </el-tab-pane>
          <el-tab-pane label="待审核" name="second">
              <el-alert  type="info" :closable="false">
                 数据一共{{ counts  }}条
              </el-alert>
          </el-tab-pane>
          <el-tab-pane label="已审核" name="third">
              <el-alert  type="info" :closable="false">
                 数据一共{{ counts  }}条
              </el-alert>
          </el-tab-pane>
          <el-tab-pane label="已拒绝" name="fourth">
              <el-alert type="info" :closable="false">
                 数据一共{{ counts  }}条
              </el-alert>
          </el-tab-pane>
      </el-tabs>

      </div>
      <!-- 表格 -->
      <div style="margin: 15px 0">
         <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="number"
            label="试题编号"
            width="150">
          </el-table-column>
          <el-table-column
            prop="subject"
            label="学科"
            width="120">
          </el-table-column>
          <el-table-column
            prop="catalog"
            label="目录"
            width="120">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            width="120">
             <template slot-scope="scope">
              <span v-if="scope.row.questionType ==='1'">单选</span>
              <span v-if="scope.row.questionType ==='2'">多选</span>
              <span v-if="scope.row.questionType ==='3'">简答</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="question"
            label="题干"
            width="300">
            <template slot-scope="scope" >
              <div v-html="scope.row.question">
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="录入时间"
            width="300"
            :formatter="dateFormat">
          </el-table-column>
           <el-table-column
            prop="difficulty"
            label="难度"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.difficulty ==='1'">简单</span>
              <span v-if="scope.row.difficulty ==='2'">一般</span>
              <span v-if="scope.row.difficulty ==='3'">困难</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="creator"
            label="录入人"
            width="120">
          </el-table-column>
           <el-table-column
            prop="chkState"
            label="审核状态"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.chkState ===0">筛选状态</span>
              <span v-if="scope.row.chkState ===1">审核通过</span>
              <span v-if="scope.row.chkState ===2">已拒绝</span>
            </template>

            <!-- {{chkState === 0? '筛选状态':  chkState === 1? '审核通过': '已拒绝'}} -->
          </el-table-column>
           <el-table-column
            prop="chkRemarks"
            label="审核意见"
            width="120">
          </el-table-column>
            <el-table-column
            prop="chkUser"
            label="审核人"
            width="120">
          </el-table-column>
            <el-table-column
            prop="publishState"
            label="发布状态"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.publishState ===0">已下架</span>
              <span v-if="scope.row.publishState ===1">已上架</span>
              <span v-if="scope.row.publishState ===2">待发布</span>

            </template>

          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="300">
            <template slot-scope="scope">
              <el-button @click="handleClickBtn(scope.row)" type="text" size="small">预览</el-button>
              <el-button type="text" size="small" @click=checkFn(scope.row)  :disabled="scope.row.chkState === 0 ? false : true">审核</el-button>
              <el-button type="text" size="small" :disabled="scope.row.publishState === 0 ? false : true" @click="resetFn(scope.row)">修改</el-button>
              <el-button type="text" size="small" @click=added(scope.row)>

                {{ scope.row.publishState===0? "上架" :"下架" }}
              </el-button>
                 <el-button type="text" size="small" :disabled="scope.row.publishState === 0 ? false : true" @click="deleteFn(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div style="float: right;">
       <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="pagesize"
          background
          :current-page="page"
          :total="counts"
          layout="prev, pager, next,jumper, total, sizes"
          :page-sizes="[5, 10, 20, 50]"
          >
      </el-pagination>
      </div>

      <!-- 预览题框 -->
      <div >
        <el-dialog
          title="题目预览"
          :visible.sync="dialogVisible"
          width="900px"
          append-to-body
          >
          <preview style="height:100%" v-if="dialogVisible" :childID="childId"></preview>
          <span slot="footer" class="dialog-footer" style="padding-left:750px" >
            <el-button @click="dialogVisible = false" type="primary">关闭</el-button>
          </span>
        </el-dialog>
      </div>

      <!-- 审核弹框 -->
      <div>
        <el-dialog
          title="提示"
          :visible.sync="checkShow"
          width="20%">
          <el-radio-group v-model="check.chkState" style="margin-bottom:20px;">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入审核意见"
            v-model="check.chkRemarks">
          </el-input>
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancelBtn">取 消</el-button>
            <el-button type="primary" @click="determineBtn">确 定</el-button>
          </span>
        </el-dialog>
      </div>

    </el-card>
  </div>
</template>

<script>
import { choice, choiceCheck, choicePublish, remove } from '@/api/hmmm/questions.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as simpler } from '@/api/hmmm/directorys.js'
import { simple as simpleTage } from '@/api/hmmm/tags.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import preview from '../components/questions-preview.vue'
import dayjs from 'dayjs'
export default {
  name: 'questions-choice',
  data () {
    return {
      form: {
        subjectID: '' // 学科
        // twoLevelDirectory: '', // 二级目录
        // tags: '', // 标签
        // questionType: '', // 题型
        // difficulty: '', // 难度
        // direction: '', // 方向
        // creator: '', // 录入人
        // provinces: '', // 城市
        // citys: ''// 城市下地区

      },
      options: [{
        value: '',
        label: ''
      }], // 学科列表
      value: '', // 暂时
      twoLevelDirectory: [], // 二级目录
      tags: [], // 标签
      questionType, // 题型
      difficulty, // 难度
      direction, // 方向
      creator: [
        {
          label: '超级管理员'
        },
        {
          label: '录入管理员'
        }
      ], // 录入人
      remarks: '', // 题目备注
      shortName: '', // 企业简称
      provinces: '', // 所有城市
      citys: [], // 城市下地区

      activeName: 'first', // 标签头
      // 表格数据
      tableData: [

        // number: '', // 试题编号
        // subjectID: '', // 学科
        // catalogID: '', // 目录
        // questionType: '', // 题型
        // question: '', // 题干
        // addDate: '' // 录入时间
        // difficultyL: '', // 难度
        // creator: '', // 录入人
        // chkState: '', // 审核状态
        // chkRemarks: '', // 审核意见
        // chkUser: '', // 审核人
        // publishState: '', // 发布状态
        // counts: ''

      ],
      counts: null, // 总条数
      pagesize: null, // 每页有多少条
      pages: null, // 总页数
      page: null, // 当前页码
      dialogVisible: false, // 预览试题弹框
      childId: null, // 给子组件的id
      checkShow: false, // 审核弹框
      check: {
        chkState: 1, // 通过或拒绝
        chkRemarks: '', // 文本域
        id: null
      }, // 审核数据
      chkState: '0' // 标签页
    }
  },

  created () {
    // 调取获取数据的接口
    this.choice({ pagesize: this.pagesize })

    this.simple()
    const r = dayjs('2020-04-30T04:16:26.000Z').format('YYYY-MM-DD HH:mm:ss') // 2019-03-06T08:00:00+08:00
    console.log(r)
    // this.questionType = questionType

    // this.difficulty = difficulty

    // this.direction = direction

    // console.log(provinces())
    this.provinces = provinces()
  },

  methods: {

    dateFormat (row, column, cellValue) {
      // console.log(row, column, cellValue)
      cellValue = dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
      return cellValue
      // return cellValue ? fecha.format(new Date(cellValue), 'YYYY-MM-DD') : ''
    },
    // 删除按钮
    deleteFn (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove({ id: id })
        this.choice({ page: this.page, pagesize: this.pagesize })
        console.log(res)
        // console.log(this.tableData.length)
        if (this.tableData.length === 1 && this.page > 1) {
          this.page = this.page - 1
          this.choice({ page: this.page, pagesize: this.pagesize })
          console.log(33)
        }
        if (this.page <= 0 && this.tableData.length === 1) {
          console.log(22)
          this.page = 1
          this.choice({ page: this.page, pagesize: this.pagesize })
        }

        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 修改按钮
    resetFn (id) {
      // console.log(id.id)
      this.$router.push({
        path: '/questions/new',
        query: {
          id: id.id
        }
      })
    },

    // 搜索按钮
    searchFn () {
      // this.handleClick()
      if (this.chkState === '0') {
        console.log(0)
        if (this.form.subjectID) { this.choice({ subjectID: this.form.subjectID }) } else { this.choice() }
        return
        // this.choice({ subjectID: this.form.subjectID })
      } else
      if (this.chkState === '1') {
        // console.log(1)
        if (this.form.subjectID) { this.choice({ chkState: 0, subjectID: this.form.subjectID }) } else { this.choice({ chkState: 0 }) }
        // this.choice({ chkState: 0, subjectID: this.form.subjectID })
        return
      } else
      if (this.chkState === '2') {
        // console.log(2)
        if (this.form.subjectID) { this.choice({ chkState: 1, subjectID: this.form.subjectID }) } else { this.choice({ chkState: 1 }) }

        // this.choice({ chkState: 1, subjectID: this.form.subjectID })
        return
      } else
      if (this.chkState === '3') {
        // console.log(3)
        if (this.form.subjectID) { this.choice({ chkState: 2, subjectID: this.form.subjectID }) } else { this.choice({ chkState: 2 }) }
        // this.choice({ chkState: 2, subjectID: this.form.subjectID })
        return
      }
      this.choice()
      // console.log(1)
    },

    // 上 下架按钮
    async added (id) {
      if (id.publishState === 0) {
        this.text = '上架'
      } else { this.text = '下架' }

      this.$confirm(`你确定要${this.text}这道题目吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (id.publishState === 0) {
          const res = await choicePublish({
            id: id.id, publishState: 1
          })
          console.log(res)
          this.choice()
          this.$message({
            type: 'success',
            message: `${this.text}成功`
          })
          return
        }
        if (id.publishState === 1) {
          const res = await choicePublish({
            id: id.id, publishState: 0
          })
          this.choice()
          console.log(res)
          this.$message({
            type: 'success',
            message: `${this.text}成功`
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    // 审核弹框里的取消按钮
    cancelBtn () {
      this.check.chkRemarks = ''
      this.checkShow = false
    },

    // 审核弹框里的确定按钮
    async  determineBtn () {
      // console.log(1)
      if (this.check.chkRemarks === '') {
        this.$message({
          message: '请输入审核意见',
          type: 'warning'
        })
        return
      }
      const res = await choiceCheck(this.check)
      console.log(res)
      this.choice()
      this.check.chkRemarks = ''
      this.checkShow = false
      this.$message({ message: '操作成功', type: 'success' })
    },

    // 审核按钮
    checkFn (id) {
      console.log(id)
      this.check.id = id.id
      this.checkShow = true
    },

    // 预览按钮
    handleClickBtn (id) {
      this.childId = id.id
      console.log(this.childId)
      this.dialogVisible = true
    },

    // 每页条数发生改变时触发
    handleSizeChange (val) {
      // console.log(this.tableData.length)
      // this.$nextTick(() => {
      //   console.log(this.tableData.length)
      // })

      // console.log(this.tab)
      if (this.tab === '1') {
        this.choice({ chkState: 0, pagesize: val })
        console.log(2)
        return
      }
      if (this.tab === '2') {
        this.choice({ chkState: 1, pagesize: val })
        return
      }
      if (this.tab === '3') {
        this.choice({ chkState: 2, pagesize: val })
        return
      }

      this.choice({ pagesize: val })
    },

    // 更改页码的时候触发
    handleCurrentChange (val) {
      // console.log(1)
      this.page = val
      this.choice({ page: val, pagesize: this.pagesize })
    },

    // 城市发生改变
    provincesFn () {
      // console.log(1)
      this.form.citys = ''
      // this.this.citys = []
      // console.log(1)
      this.citys = citys(this.form.provinces)
    },

    // 清空列表
    claer () {
      this.form = {
        // name: '', // 表单数据,
        // subjectID: '', // 学科
        // twoLevelDirectory: '', // 二级目录
        // tags: '', // 标签
        // questionType: '', // 题型
        // difficulty: '', // 难度
        // direction: '', // 方向
        // creator: '', // 录入人
        // provinces: '', // 城市
        // citys: '' // 城市下地区
      }
    },

    // 一级学科发生改变时
    async changeFn (id) {
      this.form.twoLevelDirectory = null
      this.form.tags = null
      // 二级目录
      const res = await simpler({ subjectID: id })

      this.twoLevelDirectory = res.data

      // 标签
      const resq = await simpleTage({ subjectID: id })

      this.tags = resq.data
    },

    // 学科简单列表
    async  simple () {
      const res = await simple()
      // console.log(res)
      this.options = res.data
    },

    // 获取数据列表
    async choice (data) {
      const res = await choice(data)
      console.log(res)
      this.tableData = res.data.items
      this.counts = res.data.counts
      this.pages = res.data.pages
      this.pagesize = Number(res.data.pagesize)
      this.page = Number(res.data.page)
    },

    // 标签页
    handleClick (tab, event) {
      // console.log(tab.index)
      this.chkState = tab.index
      if (tab.index === '0') {
        if (this.form.subjectID) { this.choice({ subjectID: this.form.subjectID }) } else { this.choice() }
      } else
      if (tab.index === '1') {
        if (this.form.subjectID) { this.choice({ chkState: 0, subjectID: this.form.subjectID }) } else { this.choice({ chkState: 0 }) }
      } else
      if (tab.index === '2') {
        if (this.form.subjectID) { this.choice({ chkState: 1, subjectID: this.form.subjectID }) } else { this.choice({ chkState: 1 }) }
        // this.choice({ chkState: 1, subjectID: this.form.subjectID })
      } else
      if (tab.index === '3') {
        if (this.form.subjectID) { this.choice({ chkState: 2, subjectID: this.form.subjectID }) } else { this.choice({ chkState: 2 }) }

        // this.choice({ chkState: 2, subjectID: this.form.subjectID })
      }
      this.tab = tab.index
      // console.log(this.tab)
    }
  },

  components: {
    // 弹框组件
    preview
  }
}
</script>

<style scoped lang='scss'>
.container{
  margin: 10px;
}
.addBtn{
  height: 35px;
  width: 100px;}
.clearfix{
    padding-bottom: 20px;
  }
</style>
